<template>
  <div
    id="operationlog"
    class="main-div main-div-nopadding"
  >
    <el-container>
      <el-aside
        class="background-color-white"
        style="padding: 20px 40px"
      >
        <div class="card-header-div no-float margin-bottom">
          <!--开始时间-->
          {{ $t('message.operationLog.aside.label1') }}
        </div>
        <el-date-picker
          class="margin-bottom-25"
          v-model="search.startTime"
          type="datetime"
          :placeholder="$t('message.operationLog.aside.select1Placeholder')"
        />
        <div class="card-header-div no-float margin-bottom">
          <!--结束时间-->
          {{ $t('message.operationLog.aside.label2') }}
        </div>
        <el-date-picker
          class="margin-bottom-25"
          v-model="search.endTime"
          type="datetime"
          :placeholder="$t('message.operationLog.aside.select2Placeholder')"
        />
        <div class="card-header-div no-float margin-bottom">
          <!--操作类型-->
          {{ $t('message.operationLog.aside.label3') }}
        </div>
        <el-select
          class="margin-bottom-25"
          v-model="search.operation_type"
          clearable
          :placeholder="$t('message.operationLog.aside.select3Placeholder')"
        >
          <el-option
            v-for="item in operationOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div class="card-header-div no-float margin-bottom">
          <!--操作对象-->
          {{ $t('message.operationLog.aside.label4') }}
        </div>
        <el-select
          :loading="search.operation_object_loading"
          class="margin-bottom-25"
          v-model="search.operation_object"
          clearable
          :placeholder="$t('message.operationLog.aside.select4Placeholder')"
        >
          <el-option
            v-for="item in search.operation_object_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div>
          <el-button
            :loading="loading"
            @click="getOperationLog(true)"
            style="width: 100%"
            type="primary"
          >
            <!--查询-->
            {{ $t('message.operationLog.aside.buttonSearchText') }}
          </el-button>
        </div>
      </el-aside>
      <el-main class="el-main-padding">
        <div class="my-breadcrumb-div">
          <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
          <el-breadcrumb
            class="my-breadcrumb-padding"
            separator="/"
          >
            <el-breadcrumb-item>
              <!--数据-->
              {{ $t('message.operationLog.breadcrumb.crumb1') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <!--操作日志-->
              {{ $t('message.operationLog.breadcrumb.crumb2') }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-card style="height: calc(100% - 3.5em);text-align: left">
          <el-table
            :data="operationLogTableData"
            class="table-gutter-background"
            header-cell-class-name="my-table-header-cell"
            cell-class-name="my-table-cell"
            height="calc(100% - 2.5em)"
          >
            <el-table-column
              type="index"
              width="75px"
              :index="indexMethod"
            />
            <!--时间-->
            <el-table-column
              :label="$t('message.operationLog.table.header.col2')"
              prop="dateTime"
            />
            <!--操作类型-->
            <el-table-column
              prop="operation_type_name"
              :label="$t('message.operationLog.table.header.col3')"
            />
            <!--操作对象-->
            <el-table-column
              prop="operation_object"
              :label="$t('message.operationLog.table.header.col4')"
            />
            <!--操作内容-->
            <el-table-column
              prop="operation_content"
              :label="$t('message.operationLog.table.header.col5')"
            />
          </el-table>
          <div style="margin-top: 10px;text-align: center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-sizes="[10, 20]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="operationLogCount"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import common from '@/common'
import service from '@/service/service'
export default {
  name: 'OperationLog',
  computed: {
    operationLogTableData () {
      return this.operationLogArr.map(item => {
        return {
          ...item,
          operation_type_name: this.$t(`message.define.operation.${item.operation_type}`),
          dateTime: item.time.split('.')[0].split('T').join(' ')
        }
      })
    },
    operationOption () {
      return service.getOptionList(this.$t('message.define.operation'))
    }
  },
  data () {
    return {
      loading: false,
      // 查询信息
      search: {
        startTime: '',
        endTime: '',
        operation_type: '',

        operation_object_loading: false,
        operation_object: '',
        operation_object_options: []
      },

      // 用于分页查询的信息
      searched: {
        startTime: '',
        endTime: '',
        operation_type: '',
        operation_object: ''
      },

      operationLogCount: 0,
      operationLogArr: [],

      // 分页信息
      pagination: {
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  mounted () {
    this.getOperationOption()
  },
  methods: {
    indexMethod (index) {
      return index + (this.pagination.currentPage - 1) * this.pagination.pageSize + 1
    },
    async getOperationOption () {
      let self = this
      try {
        self.search.operation_object_loading = true
        let response = await self.$store.dispatch('axios', {
          method: 'get',
          url: '/api/abs/mtw/operation_log/operation_objects/'
        })
        let operationObjectOptions = []
        for (let key in response.data) {
          operationObjectOptions.push({
            label: response.data[key],
            value: key
          })
        }
        this.search.operation_object_options = operationObjectOptions
      } finally {
        self.search.operation_object_loading = false
      }
    },
    async getOperationLog () {
      let self = this
      self.pagination.currentPage = 1
      try {
        self.loading = true
        let response = await self.$store.dispatch('axios', {
          method: 'get',
          url: '/api/abs/mtw/operation_log/',
          params: {
            begin: common.convertDateTime(self.search.startTime),
            end: common.convertDateTime(self.search.endTime),

            page: self.pagination.currentPage,
            page_size: self.pagination.pageSize,

            operation_type: self.search.operation_type,
            operation_object: self.search.operation_object
          }
        })
        self.operationLogArr = response.data.results
        self.operationLogCount = response.data.count

        self.searched.startTime = self.search.startTime
        self.searched.endTime = self.search.endTime
        self.searched.operation_type = self.search.operation_type
        self.searched.operation_object = self.search.operation_object
      } finally {
        self.loading = false
      }
    },
    async getOperationLogByPage () {
      let self = this
      try {
        self.loading = true
        let response = await self.$store.dispatch('axios', {
          method: 'get',
          url: '/api/abs/mtw/operation_log/',
          params: {
            begin: common.convertDateTime(self.searched.startTime),
            end: common.convertDateTime(self.searched.endTime),

            page: self.pagination.currentPage,
            page_size: self.pagination.pageSize,

            operation_type: self.searched.operation_type,
            operation_object: self.searched.operation_object
          }
        })
        self.operationLogArr = response.data.results
        self.operationLogCount = response.data.count
      } finally {
        self.loading = false
      }
    },
    handleSizeChange (pageSize) {
      let self = this
      self.pagination.pageSize = pageSize
      self.getOperationLogByPage()
    },
    handleCurrentChange (currentPage) {
      let self = this
      self.pagination.currentPage = currentPage
      self.getOperationLogByPage()
    }
  }
}
</script>

<style scoped>
  .no-float{
    float: none;
  }
  .margin-bottom{
    margin-bottom: 20px;
  }
  .margin-bottom-25{
    margin-bottom: 20px;
  }
</style>
